<!doctype html>
<html>
<head>
<title>Test for first-letter that is removed or added by style change</title>
<style>
    .test:first-letter { color: green; font-size:64px; float:inherit; }
    .test { clear:both; }
    .boxed { border: solid 1px; }
    .bef:before { content:"Before "; }
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div id="description"></div>

Test 1:<br/>
<div class="test boxed" id="test1">Block to Inline</div><br/>
<div class="test boxed" id="ref1" style="display:inline">Block to Inline</div><br/>
<hr/>

Test 2:<br/>
<span class="test boxed" id="test2">Inline to Block</span>
<span class="test boxed" id="ref2" style="display:block">Inline to Block</span>
<hr/>

Test 3:<br/>
<div class="test"><span id="test3" class="boxed bef">pseudo</span></div>
<div class="test"><span id="ref3" class="boxed">pseudo</span></div>
<hr/>

Test 4:<br/>
<div class="test"><span id="test4" class="boxed">pseudo</span></div>
<div class="test"><span id="ref4" class="boxed bef">pseudo</span></div>
<hr/>

Test 5:<br/>
<div class="test"><span id="test5" class="boxed" style="float:none">To Float</span></div>
<div class="test"><span id="ref5" class="boxed" style="float:left">To Float</span></div>
<br/>
<hr/>

Test 6:<br/>
<div class="test"><span id="test6" class="boxed" style="float:left">To Non Float</span></div>
<div class="test"><span id="ref6" class="boxed" style="float:none">To Non Float</span></div>
<hr/>

Test 7:<br/>
<div class="test"><div id="test7" class="boxed" style="float:none">To Float</div></div>
<div class="test"><div id="ref7" class="boxed" style="float:left">To Float</div></div>
<br/>
<hr/>

Test 8:<br/>
<div class="test"><div id="test8" class="boxed" style="float:left">To Non Float</div></div>
<div class="test"><div id="ref8" class="boxed" style="float:none">To Non Float</div></div>
<hr/>

<div id="console"></div>

<script>
description("The following pairs should look the same.");

document.body.offsetTop; // Force layout

document.getElementById("test1").style.display = "inline";
document.getElementById("test2").style.display = "block";
document.getElementById("test3").className = "boxed";
document.getElementById("test4").className = "boxed bef";
document.getElementById("test5").style.float = "left";
document.getElementById("test6").style.float = "none";
document.getElementById("test7").style.float = "left";
document.getElementById("test8").style.float = "none";

shouldBeTrue("document.getElementById('test1').offsetWidth == document.getElementById('ref1').offsetWidth");
shouldBeTrue("document.getElementById('test2').offsetHeight == document.getElementById('ref2').offsetHeight");
shouldBeTrue("document.getElementById('test3').offsetWidth == document.getElementById('ref3').offsetWidth");
shouldBeTrue("document.getElementById('test4').offsetWidth == document.getElementById('ref4').offsetWidth");
shouldBeTrue("document.getElementById('test5').offsetWidth == document.getElementById('ref5').offsetWidth");
shouldBeTrue("document.getElementById('test6').offsetWidth == document.getElementById('ref6').offsetWidth");
shouldBeTrue("document.getElementById('test7').offsetWidth == document.getElementById('ref7').offsetWidth");
shouldBeTrue("document.getElementById('test8').offsetWidth == document.getElementById('ref8').offsetWidth");
</script>
</body>
</html>
